<template>
  <view class="recruiting">
    <image class="logo"
           src="../../static/image/sy_img_td@2x.png"></image>
    <view class="list">
      <swiper class="swiper"
              autoplay
              :vertical="true">
        <swiper-item v-for="el in dataList"
                     :key="el.id"
                     class="item">
          <view @click="tonews(el.id)" class="msg">
            <view class="icon">{{el.icon}}</view>
            <view class="title">{{el.name}}</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: Array
  },
 methods: {
 	tonews(id) {
 		uni.navigateTo({
 			url:`/pages/information/news_det?id=${id}`
 		});
 	}
 }
}
</script>

<style lang="scss">
.recruiting {
  background: #fff;
  margin: 20rpx 0;
  padding: 20rpx 0;
  display: flex;

  .logo {
    width: 100rpx;
    height: 100rpx;
    margin-left: 20rpx;
    margin-right: 50rpx;
  }
  .list {
    flex-grow: 1;
    .swiper {
      height: 100%;
      .item {
        height: 100%;
        .msg {
          display: flex;
          height: 100%;
          align-items: center;
          .icon {
            width: 80rpx;
            height: 40rpx;
            line-height: 40rpx;
            background: #ff3b30;
            color: #fff;
            font-size: 24rpx;
            text-align: center;
            margin-right: 20rpx;
          }
          .title {
            color: #333;
            font-size: 28rpx;
          }
        }
      }
    }
  }
}
</style>